<template>
  <div class="message_configure">
    <div>
      <template v-for="(item,index) in numList">
        <p>
          <span>姓名：</span>
          <el-input v-model="item.name" size="mini" class="name-input"></el-input>
          <span>手机号:</span>
          <el-input v-model="item.phone" size="mini" class="num-input"></el-input>
          <span class="add-ip" v-if="numList.length > 1" @click="reduceNum(index)">-</span>
          <span class="add-ip" v-if="numList.length == (index + 1)" @click="addNum">+</span>
        </p>
      </template>

      <p style="text-align: center;margin-top: 50px;">
        <el-button size="mini" @click="$emit('closeDialog')">取消</el-button>
        <el-button size="mini" type="primary" @click="submint">确定</el-button>
      </p>

    </div>










  </div>
</template>

<script>
  export default {
    data() {
      return {
        numList: [
         {
           name:'',
           phone: ''
         }
        ]
      }
    },

    mounted() {
      this.getPersonList();
    },

    methods: {
      addNum() {
        this.numList.push({name:'',phone:''})
      },

      reduceNum(index) {
        this.numList.splice(index,1)
      },

      getPersonList() {
        this.$axios({
          method:'get',
          url: 'equipment/person/getPersonList'
        }).then((res) => {
          if(res.code == 200) {
            if(res.data) {
              this.numList = res.data;
            }
          }
        })
      },

      submint() {
        this.$axios({
          method: 'post',
          url: 'equipment/person/personInfo/edit',
          data: this.numList
        }).then((res) => {
          if(res.code == 200) {
            this.$message.success('配置成功！');
            this.$emit('closeDialog');
          }
        })
      }

    }
  }
</script>

<style scoped>
  .name-input {
    width: 100px;
  }

  .num-input {
    width: 200px;
  }

  .add-ip {
    font-size: 30px;
    color: red;
    vertical-align: middle;
  }

  .add-ip:hover {
    cursor: pointer;
  }



</style>
